
<template>
  <div>
    <canvas ref="canvas" width="400" height="400"></canvas>
  </div>
</template>
 
<script>
export default {
  mounted() {
    this.drawRectangleEllipse();
  },
  methods: {
    drawRectangleEllipse() {
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext('2d');
 
      // 矩形的属性
      const rectX = 50;
      const rectY = 50;
      const rectWidth = 200;
      const rectHeight = 150;
 
      // 椭圆的属性
      const ellipseX = 175;
      const ellipseY = 100;
      const ellipseWidth = 100;
      const ellipseHeight = 100;
 
      // 绘制矩形
      ctx.beginPath();
      ctx.rect(rectX, rectY, rectWidth, rectHeight);
      ctx.fillStyle = 'blue';
      ctx.fill();
      ctx.lineWidth = 2;
      ctx.strokeStyle = 'black';
      ctx.stroke();
 
      // 绘制椭圆
      ctx.beginPath();
      ctx.ellipse(150, 125, 100, 75, 0, 0, Math.PI * 2);
      ctx.fillStyle = 'red';
      ctx.fill();
      ctx.lineWidth = 2;
      ctx.strokeStyle = 'black';
      ctx.stroke();
    }
  }
};
</script>